<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*为了能够设置两个标签叠加在一起，需要设置其父标签*/
        .father {
            /*标签位置设置为相对的*/
            position: relative;
            text-align: center;
            width: 800px;
        }

        /*canvas的大小需要在起标签内设置，否则会拉伸或缩小默认的大小*/
        .canvas {
            border: 1px solid black;
            /*位置绝对*/
            position: absolute;
            top: 0;
            left: 0;
            /*设置所在层数，在上层*/
            z-index: 1;
        }

        /*需要将img背景图的尺寸和canvas的尺寸设置相同*/
        .canvas_bgp {
            width: 650px;
            height: 414px;
            /*位置绝对*/
            position: absolute;
            top: 0;
            left: 0;
        }

        .btn {
            /*位置绝对*/
            position: absolute;
            top: 420px;
            left: 220px;
        }
    </style>
</head>
<body oncontextmenu="doNothing()">
<div>
    <canvas id="cvs" width="650px" height="414px" class="canvas">不支持canvas</canvas>
    <img src="" class="canvas_bgp">
</div>
<div class="btn" >
    <input type="button" value="保存" onclick="save()"/>
    <input type="button" value="退出"/>
</div>
<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
<script type="text/javascript">

    function doNothing() {
        window.event.returnValue = false;
        return false;
    }

    var cvs = document.getElementById("cvs");
    var cvsClientRect = cvs.getBoundingClientRect();
    var points = [];
    // var quadrilateral = [];
    cvs.addEventListener("mousedown", mousedownHandler, false);
    var ctx = cvs.getContext('2d');
    var flag = false;

    function mousedownHandler(event) {


        if (points.length <= 99) {
            if (event.button == 0 && !flag) {
                points.push({
                    x: event.pageX - cvsClientRect.x,
                    y: event.pageY - cvsClientRect.y
                });
                if (points.length >= 1) {
                    cvs.addEventListener("mousemove", mousemoveHandler, false);
                }
                drawPolygon(points);
                console.log(points)
            } else if (event.button == 2) {
                chehui(points)
            }
        } else if (event.button === 0) {
            flag = true;
            cvs.removeEventListener("mousemove", mousemoveHandler);
        }
    }

    function chehui(points) {
        points.pop()
    }

    function drawPolygon(points) {
        ctx.clearRect(0, 0, 650, 414);

        ctx.strokeStyle = '#ff0000';
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);


        for (var i = 0; i < points.length; i++) {
            // 第一个点
            if (i % 4 == 0) {
                ctx.moveTo(points[i].x, points[i].y);
            } else if (i % 4 == 3) {//第四个点 闭合
                ctx.lineTo(points[i].x, points[i].y);
                ctx.lineTo(points[i - 3].x, points[i - 3].y)
            } else {
                ctx.lineTo(points[i].x, points[i].y);
            }
        }
        ctx.closePath();
        ctx.stroke();
        // console.log(points)

    }

    function mousemoveHandler(event) {
        if (points.length % 4 != 0) {
            drawPolygon(points.concat({
                x: event.pageX - cvsClientRect.x,
                y: event.pageY - cvsClientRect.y
            }));
        }
    }

    function msg() {
        alert(points)
    }

    function save(){
        console.log("ajax:"+points)
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/camera/draw" ,//url
            traditional:true,
            // contentType: "application/json;charset=UTF-8",
            data:{points:JSON.stringify(points) } ,
            success: function (result) {
                console.log(result);
                if (result){
                    layer.alert("增加成功", {
                            icon: 6
                        },
                        function() {
                            //关闭当前frame
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        });
                }
            },
            error:function () {
                alert("程序错误");
            }
        });
    }

</script>
</body>
</html>